<template>
	<div>
		<div class="v-cell" v-if="videoItem.showMode==2||videoItem.showMode==0" @click="goDetail">
			<div class="big-img" v-if="videoItem.showMode==2">
				<van-image  width="9.04rem" height="5.06667rem" lazy-load :src="videoItem.showImage"/>
			</div>
			<div class="v-cell-body pos-r v-cell-body-big">
				<div class="v-cell-tit big-tit ellipsis2">
					{{videoItem.videoName}}
				</div>
				<div class="v-cell-time v-cell-time-big">
					{{videoItem.created}}
				</div>
			</div>
		</div>
		<div class="v-cell" v-else @click="goDetail">
			<div class="flex align-items justify-b v-cell-small pos-r">
				<div class="v-cell-body pos-r flex-1">
					<div class="v-cell-tit  ellipsis2">
						{{videoItem.videoName||videoItem.shortName}}
					</div>
					<div class="v-cell-time">
						{{videoItem.created}}
					</div>
				</div>
				<div class="small-img">
					<van-image width="3.01333rem" height="1.97333rem" lazy-load :src="videoItem.showImage"/>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	import {
		Image
	} from 'vant';
	export default {
		props: ['videoItem'],
		components: {
			[Image.name]: Image,
		},
		methods:{
			goDetail(){
				let self = this
				let name = self.videoItem.type == 'short'?'goods2':'goods'
				self.$router.push({name:`${name}`,query:{id:self.videoItem.id||self.videoItem.shortId}})
			}
		}
	}
</script>
<style lang="less" scoped>
	.v-cell {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: 20px 18px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		background-color: #fff;
		padding-bottom: 0;
	}

	.big-img {
		width: 339px;
		height: 190px;
		border-radius:3px;
		overflow: hidden;
	}
	.small-img{
		width:113px;
		height:74px;
		border-radius:3px;
		overflow: hidden;
	}
	.v-cell-small{
		padding-bottom: 25px;
	}
	.v-cell-small:after,.v-cell-body-big::after {
		position: absolute;
		box-sizing: border-box;
		content: ' ';
		pointer-events: none;
		right: 0;
		bottom: 0;
		left:0;
		border-bottom: 1px solid #ebedf0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	.v-cell-tit{
		font-size:17px;
		font-weight:500;
		color:#333333FF;
		line-height:26px;
	}
	.v-cell-time{
		margin-top: 3px;
		font-size:12px;
		font-weight:500;
		color:#999999FF;
		line-height:17px;
	}
	.big-tit{
		margin-top: 9.5px;
	}
	.v-cell-time-big{
		padding-bottom: 20px;
	}
</style>
